<template>
  <div>
    <!-- tabbar组件 -->
    <Tabbar v-model="active" active-color="#EB6100" inactive-color="#333333" route fixed>
      <TabbarItem v-for="(item,index) in tabbar" :key="index" :to="item.path">
        <span>{{item.name}}</span>
        <template #icon="props">
          <img :src="props.active ? item.selectIcon : item.icon" />
        </template>
      </TabbarItem>
    </Tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  components: {
    Tabbar,
    TabbarItem,
  },
  data() {
    return {
      active: 0,
      tabbar: [
        {
          icon:
            "https://dcdn.it120.cc/2020/08/27/1a2cfe0b-9556-470e-9479-6c2ed2acf177.png",
          selectIcon:
            "https://dcdn.it120.cc/2020/08/27/1fddaaf9-245b-42e7-b567-76b0a043f2c5.png",
          name: "首页",
          path: "/home",
        },
        {
          icon:
            "https://dcdn.it120.cc/2020/08/27/8ca0240a-3c89-4c86-8e47-a3f365cdf638.png",
          selectIcon:
            "https://dcdn.it120.cc/2020/08/27/cc862e47-4ab8-4fbd-80e0-261f44a3458e.png",
          name: "课程",
          path: "/about",
        },
        {
          icon:
            "https://dcdn.it120.cc/2020/08/27/284ba125-05e6-4bde-b56d-e199332b8cd0.png",
          selectIcon:
            "https://dcdn.it120.cc/2020/08/27/2585138a-e438-4dfe-88c7-450554d5bf68.png",
          name: "约课记录",
          path: "/study",
        },
        {
          icon:
            "https://dcdn.it120.cc/2020/08/27/bab5d07a-d976-4321-abe2-93f9379b1b91.png",
          selectIcon:
            "https://dcdn.it120.cc/2020/08/27/5e612741-304d-43a8-b7ef-16825f7829a3.png",
          name: "练习",
          path: "/text",
        },
        {
          icon:
            "https://dcdn.it120.cc/2020/08/27/2678d2ba-fb2e-4220-9a26-1a42c171889a.png",
          selectIcon:
            "https://dcdn.it120.cc/2020/08/27/5e612741-304d-43a8-b7ef-16825f7829a3.png",
          name: "我的",
          path: "/main",
        },
      ],
    };
  },
};
</script>

<style>
</style>